<template>
  <div>
    <my-input v-model="inputValue"/><br/>
    {{ inputValue }} is last Value => {{ inputValueLstLetter }}
    <my-show :content="inputValue"/>
    <p>appName：{{ appName }} 版本号是  {{ appNameWithVersion }}</p>
    <p>userName：{{ userName }} 第一个字符为 {{ firstUserName }}</p>
  </div>
</template>

<script>
import MyInput from '_c/MyInput'
import MyShow from '_c/MyShow'
import { mapState, mapGetters } from 'vuex'
// 使用命名空间
//  import { createNamespacedHelpers } from 'vuex'
//  const { mapState } = createNamespacedHelpers('user')

export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  computed: {
//      ...mapState('user', {
//        userName: state => state.userName,
//      }),
    ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName
    }),
    ...mapGetters([
      'appNameWithVersion',
      'firstUserName'
    ]),
//      appName () {
//        return this.$store.state.appName
//      },
//      userName () {
//        return this.$store.state.user.userName
//      }
//      appNameWithVersion () {
//        return this.$store.getters.appNameWithVersion
//      },
    inputValueLstLetter () {
      return this.inputValue.substr(-1, 1)
    }
  },
  components: {
    MyInput,
    MyShow
  }
}
</script>
